import React, { Component } from 'react';
import axios from 'axios';
import MenuHead from '../comm/menuHead';
import RubikFace from '../comm/rubikFace';

class RubikCube extends Component {
  state = {
    white: "白白白白白白白白白",
    green: "绿绿绿绿绿绿绿绿绿",
    red: "红红红红红红红红红",
    blue: "蓝蓝蓝蓝蓝蓝蓝蓝蓝",
    orange: "橙橙橙橙橙橙橙橙橙",
    yellow: "黄黄黄黄黄黄黄黄黄",
    output: "",
  }
  setCubeFace = (no, color) => {
    let cubestring = [...this.state.cubestring];
    cubestring[no] = color;
    this.setState({
      cubestring: cubestring,
    })
  }
  setCubeWhiteFace = (no, color) => {
    let white = [...this.state.white];
    white[no] = color;
    this.setState({
      white: white,
    })
  }
  setCubeGreenFace = (no, color) => {
    let green = [...this.state.green];
    green[no] = color;
    this.setState({
      green: green,
    })
  }
  setCubeRedFace = (no, color) => {
    let red = [...this.state.red];
    red[no] = color;
    this.setState({
      red: red,
    })
  }
  setCubeBlueFace = (no, color) => {
    let blue = [...this.state.blue];
    blue[no] = color;
    this.setState({
      blue: blue,
    })
  }
  setCubeOrangeFace = (no, color) => {
    let orange = [...this.state.orange];
    orange[no] = color;
    this.setState({
      orange: orange,
    })
  }
  setCubeYellowFace = (no, color) => {
    let yellow = [...this.state.yellow];
    yellow[no] = color;
    this.setState({
      yellow: yellow,
    })
  }
  arrayToString = (arr) => {
    if(Array.isArray(arr)) arr = arr.join("");
    return arr;
  }
  reset = () => {
    this.setState({
      white: "白白白白白白白白白",
      green: "绿绿绿绿绿绿绿绿绿",
      red: "红红红红红红红红红",
      blue: "蓝蓝蓝蓝蓝蓝蓝蓝蓝",
      orange: "橙橙橙橙橙橙橙橙橙",
      yellow: "黄黄黄黄黄黄黄黄黄",
    })
  }
  solve = () => {
    let cubestring = this.arrayToString(this.state.white);
    cubestring += this.arrayToString(this.state.blue);
    cubestring += this.arrayToString(this.state.red);
    cubestring += this.arrayToString(this.state.yellow);
    cubestring += this.arrayToString(this.state.green);
    cubestring += this.arrayToString(this.state.orange);
    axios.post("/flask/rubik_cube", {
      "cubestring": cubestring,
    }).then((res) => {
      this.setState({
        output: res.data.result,
      })
    }).catch((err) => {
      alert(err)
    })
  }
  render () {
    return (
      <div align='center'>
      <MenuHead/>
      <div>
        <h4>解三阶魔方</h4>
      </div>
      <table>
      <tbody>
      <tr>
        <td></td>
        <td>
          <RubikFace color={this.state.white} setCubeace={this.setCubeWhiteFace}/>
        </td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>
          <RubikFace color={this.state.green} setCubeace={this.setCubeGreenFace}/>
        </td>
        <td>
          <RubikFace color={this.state.red} setCubeace={this.setCubeRedFace}/>
        </td>
        <td>
          <RubikFace color={this.state.blue} setCubeace={this.setCubeBlueFace}/>
        </td>
        <td>
          <RubikFace color={this.state.orange} setCubeace={this.setCubeOrangeFace}/>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <RubikFace color={this.state.yellow} setCubeace={this.setCubeYellowFace}/>
        </td>
      </tr>
      </tbody>
      </table>
      <table>
      <tbody>
      <tr>
        <td><button onClick={this.reset}>重置</button></td>
        <td width='50'></td>
        <td><button onClick={this.solve}>解</button></td>
      </tr>
      </tbody>
      </table>
      <div>
        <textarea rows='5' cols='33' value={this.state.output} readOnly="readOnly"></textarea>
      </div>
      </div>
    )
  }
}

export default RubikCube;
